<template>
    <div class="rooms-page" v-if="rooms">
        <div class="rooms-img">
            <div class="left" @click="show = true">
                <div class="imgbg" :style="{'background-image':'url('+rooms.imgs[0]+')'}"></div>
            </div>
            <div class="right">
                <div class="item">
                    <div class="top" @click="show = true">
                        <div class="imgbg" :style="{'background-image':'url('+rooms.imgs[1]+')'}"></div>
                    </div>
                    <div class="bottom" @click="show = true">
                        <div class="imgbg" :style="{'background-image':'url('+rooms.imgs[2]+')'}"></div>
                    </div>
                </div>
                <div class="item item-right">
                    <div class="top" @click="show = true">
                        <div class="imgbg" :style="{'background-image':'url('+rooms.imgs[3]+')'}"></div>
                    </div>
                    <div class="bottom" @click="show = true"> 
                        <div class="imgbg" :style="{'background-image':'url('+rooms.imgs[4]+')'}"></div>
                    </div>
                </div>
            </div>
            <button type="button" class="pic-more" @click="show = true">查看更多</button>
        </div>
        <b-container class="rooms-content">
            <b-row class="rooms-info">
                <b-col sm="12" md="10">
                    <div class="left-info">
                        <div class="type1">
                            <span>出租类型：{{rooms.type == 'ALL' ? '整组' : '单租'}}</span> 
                            <div class="label-name">
                                <span v-for="(item,index) in rooms.tags" :key="index">{{item}}</span>
                            </div>
                        </div>
                        <h3>{{rooms.title}}</h3>
                        <div class="roomsinfo">
                            <span><i class="iconfont icon-fangjian"></i>{{rooms.room}}间卧室</span>
                            <span><i class="iconfont icon-chuang"></i>{{rooms.bed}}张床</span>
                            <span><i class="iconfont icon-yugang"></i>{{rooms.toilet}}个独立卫生间</span>
                            <span><i class="iconfont icon-duoren"></i>建议入住{{rooms.people}}人</span>
                        </div>
                        <div class="rooms-mj"></div>
                        <div class="left-price">
                            <div class="price"><strong>¥{{rooms.price/100}}</strong>/晚</div>
                            <div class="evaluation">评价：<i v-for="item in rooms.rate" :key="item" class="iconfont icon-wuxing"></i></div>
                        </div>

                        <div class="admin-info">
                            <span class="admin-img"><img  :src="rooms.steward.avatar" alt=""></span>
                            <div class="admin-right">
                                <div class="admin-nickname">私人管家：{{rooms.steward.nickname}}</div>
                                <div class="admin-call">
                                    <span @click="alertFn('admincode')">管家微信：<i  class="iconfont icon-wuxing"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="rooms-jianjie">{{rooms.intro || '暂无房间介绍'}}</div>

                        <div class="rooms-rooms">
                            <dl class="item" v-for="(item,index) in rooms.beds" :key="index">
                                <dt><i class="iconfont icon-chuang"></i></dt>
                                <dd>{{item.name}}</dd>
                                <dd>{{item.count}}张</dd>
                            </dl>
                        </div>
                        <div class="rooms-type">
                            <div class="text"><span>整套房子/公寓</span>无需与房东或房客共享空间，独享整个房源</div>
                            <div class="text"><span>别墅面积</span>室内面积{{rooms.square}}平米 室外面积{{rooms.outsquare}}平米</div>
                            <div class="text"><span>入住/退房</span>入住时间 14:00后 · 退房时间 12:00</div>
                        </div>
                        <div class="rooms-conf">
                            <div v-if="componenlist && componenlist.length < 1" style="font-size:16px;color:#555;">暂无配置</div>
                            <dl v-for="(item,index) of componenlist" :key="index">
                                <dt><img :src="item.path" alt=""></dt>
                                <dd>{{item.name}}</dd>
                            </dl>
                        </div>
                        <div class="rooms-map">
                            <div class="map-title">位置</div>
                            <img :src="`https://apis.map.qq.com/ws/staticmap/v2/?center=${rooms.location.longitude},${rooms.location.latitude}&zoom=14&size=1410*400&maptype=roadmap&key=UQYBZ-724WO-WBUWG-SKCXI-IA6XS-QJF6Y&scale=1`" alt="">
                        </div>
                        <div class="rooms-notice">
                            <div class="notice-title">须知</div>
                            <div class="rooms-notice-box">
                                <div class="rooms-notice-lable">基本要求</div>
                                <div class="rooms-notice-content">
                                    <p>禁止吸烟</p>
                                    <p>不允许携带宠物</p>
                                    <p>允许举办派对和活动</p>
                                    <p>14:00后可以随时入住，12:00前退房</p>
                                </div>
                            </div>
                            <div class="rooms-notice-box">
                                <div class="rooms-notice-lable">预订取消政策</div>
                                <div class="rooms-notice-content">
                                    <p>中等政策——48小时内免费取消 · 限时全额退款</p>
                                </div>
                            </div>
                            <div class="rooms-notice-box">
                                <div class="rooms-notice-lable">交易提示</div>
                                <div class="rooms-notice-content">
                                    <p>为了保护您的账号隐私和付款安全，请不要相信其它任何平台的折扣或礼金券代订，并始终在爱彼迎站内转账和交流。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </b-col>
            </b-row>
        </b-container>
        <div class="rooms-order">
            <b-alert variant="danger"
                    dismissible
                    :show="showDismissibleAlert"
                    @dismissed="showDismissibleAlert=false">
            离开日期应该在入住日期之后!
            </b-alert>
            <b-container class="rooms-order-box">
                <b-row>
                    <b-col sm="12" md="4">
                        <div class="order-left">
                            <div class="start-time">
                                <span><DatePicker v-model="startTime" :moment="today"></DatePicker></span>
                                <label>入住</label>
                            </div>
                            <div class="center-time">
                                <span></span>
                                <label>共{{day}}晚</label>
                            </div>
                            <div class="end-time">
                                <span><DatePicker v-model="endTime" :moment="tomorrow"></DatePicker></span>
                                <label>离开</label>
                            </div>
                        </div>
                    </b-col>
                    <b-col sm="12" md="6">
                        <div class="order-center">
                            <strong>总价：<span>{{housemoney}}</span></strong><i class="iconfont icon-wenhao"></i>
                        </div>
                    </b-col>
                    <b-col sm="12" md="2">
                        <div class="order-right"><button type="button" @click="alertFn('ordercode')">立即预订</button></div>
                    </b-col>
                </b-row>
            </b-container>
        </div>
        <div class="alertbox" v-show="alertshow">
            <component :is="currentView">
                <button type="button" class="close" @click="alertshow = false" slot="close"><i class="iconfont icon-tianjia-copy"></i></button>
            </component>   
        </div>
        <show-pic v-show="show"  v-model="show" :imglist="rooms.imgs">
            <span class="picclose" @click="show = false" slot="close"><i class="iconfont icon-tianjia-copy"></i></span>
        </show-pic>
    </div>
</template>


<script>
import DatePicker from '../components/date-picker'
import showPic from '../components/showpic'
import ordercode from '../components/ordercode'
import admincode from '../components/admincode'
export default {
    data(){
        return {
            rooms:'',
            alertshow:false,
            startTime:'2018-11-09',
            endTime:'2018-11-10',
            startArr:[],
            endArr:[],
            day:'1',
            housemoney:'',
            showDismissibleAlert:false,
            show:false,
            monthDay:30,
            componenlist:[],
            currentView:'ordercode'
        }
    },
    components: {
        DatePicker,
        showPic,
        ordercode,
        admincode
    },
    mounted(){
        this.house();
        this.houseComponent();
        this.startArr = this.startTime.split('-');
        this.endArr = this.endTime.split('-');
    },
    computed:{
        today(){
            return new Date().getTime()
        },
        tomorrow(){
            return new Date().getTime() + 86400000
        }
    },
    watch:{
        rooms(){
            // this.getResize()
        },
        startTime(){
            this.startArr = this.startTime.split('-');
            // this.housemoney = this.rooms.price * this.day;
        },
        endTime(){
            this.endArr = this.endTime.split('-');
            if(this.endArr[0] < this.startArr[0]){
                this.showDismissibleAlert=true
                return;
            }else if(this.endArr[0] == this.startArr[0]){
                if(this.endArr[1] < this.startArr[1]){
                    this.showDismissibleAlert=true
                    return;
                }else{
                    if(this.endArr[1] ==  this.startArr[1] &&  this.endArr[2] < this.startArr[2]){
                        this.showDismissibleAlert=true
                        return;
                    }
                }
            }
            this.showDismissibleAlert=false
            if(this.endArr[0] == this.startArr[0] && this.endArr[1] == this.startArr[1]){
                this.day = Math.abs(this.endArr[2] - this.startArr[2])
            }
            if(this.endArr[0] == this.startArr[0] && this.endArr[1] > this.startArr[1]){
                this.day = (this.monthDay - this.startArr[2]) + Number(+ this.endArr[2]);
            }
            if(this.endArr[0] > this.startArr[0]){
                this.day = ((12 - this.startArr[1]) * 30 + (this.monthDay - this.startArr[2])) + (30 *  Number(+ this.endArr[1])) - (30 - Number(+ this.endArr[2]));
            }
            this.housemoney = this.rooms.price * this.day/100;
        },
    },
    methods:{
        alertFn(name){
            this.alertshow = true;
            this.currentView = name;
        },
        house(){
          this.$http.get(`${this.$URL_HTTP}/house?id=${this.$route.query.id}`).then( (res) => {
              console.log(res)
              if(res.data.status){
                this.rooms = res.data.payload.house;
                this.housemoney = this.rooms.price/100;
              }else{
                console.log(res.data.message)
              }
          })
      },
      houseComponent(){
          this.$http.get(`${this.$URL_HTTP}/house/component/list?id=${this.$route.query.id}`).then( (res) => {
              console.log(res)
              if(res.data.status){
                this.componenlist = res.data.payload.list;
              }else{
                console.log(res.data.message)
              }
          })
      }
    }
}
</script>

<style lang="less">
.rooms-page{
    width:100%;
    .rooms-img{
        width:100%;
        overflow: hidden;
        height:600px;
        position: relative;
        display: flex;
        .imgbg{
            width:100%;
            height:100%;
            background-size:cover;
            background-repeat: no-repeat;
            background-position: center;
            background-color:#ccc;
            transition:all 0.3s linear;
        }
        .left{
            overflow: hidden;
            margin-right:4px;
            width:50%;
            img{
                display: block;
                width:100%;
                // height:100%;
                transition: all 0.3s linear;
            }
        }
        .right{
            overflow: hidden;
            background:#fff;
            width:450px;
            width:50%;
            display: flex;
            .item{
                width:50%;
                margin-right:4px;
                .top{
                    margin-bottom: 4px;
                    height:296px;
                    overflow: hidden;
                }
                .bottom{
                    height:300px;
                    overflow: hidden;
                }
            }
            img{
                display: block;
                width:100%;
                // height:100%;
                transition: all 0.3s linear;
            }
            @media screen and (max-width:1366px) {
                .item{
                    width:100%;
                }
                .item-right{
                    display: none;
                }
            }
            
        }
        .left:hover,.top:hover,.bottom:hover{
            cursor: pointer;
            .imgbg{
                transform: scale(1.1)
            }
        }
        @media screen and (max-width:769px) {
            .left{
                width:100%;
            }
            .right{
                display: none;
            }
        }
        .pic-more{
            position: absolute;
            right:10px;
            bottom:10px;
            background:#fff;
            border:0;
            font-size:14px;
            padding:5px 10px;
            cursor: pointer;
        }
    }
    .rooms-content{
        padding-bottom: 200px;
    }
    .rooms-info{
        margin:30px 0;
        display: flex;
        min-height: 300px;
        .left-info{
            flex:2;
            .type1{
                line-height: 16px;
                font-size:12px;
                display: flex;
                align-items: center;
                margin-bottom:10px;
                > span{
                    color:rgb(83, 18, 16);
                    margin-right:10px;
                }
            }
            .label-name{
                span{
                    color:#333;
                    background:#e1bf00;
                    margin-right:10px;
                    display:inline-block;
                    border-radius:50px;
                    line-height: 20px;
                    padding:0 10px;
                }
            }
            h3{
                font-size:32px;
                font-weight: 400;
                color:rgb(72, 72, 72);
                line-height: 36px;
            }
            .roomsinfo{
                margin:10px 0;
                span{
                    font-size:16px;
                    margin-right:10px;
                    line-height: 22px;
                    color:rgb(72, 72, 72);
                    i{
                        font-size:14px;
                        margin-right:5px;
                    }
                }
            }
            .left-price{
                font-size:14px;
                color:#000;
                border-bottom: 1px solid #eee;
                padding-bottom:30px;
                margin-bottom:50px;
                display: flex;
                align-items: center;
                .price{
                    width:20%;
                    strong{
                        font-size:24px;
                        font-weight: 400;
                    }
                }
                .evaluation{
                    color:#000;
                    i{
                        color:#e1bf00;
                    }
                }
            }
            .admin-info{
                display: flex;
                margin-bottom: 20px;
                .admin-img{
                    width:50px;
                    height:50px;
                    display: block;
                    border-radius: 50%;
                    cursor: pointer;
                    background:rgb(248, 248, 248);
                    img{
                        width:50px;
                        height:50px;
                        border-radius: 50%;
                    }
                }
                .admin-right{
                    margin-left: 10px;
                    font-size:14px;
                    line-height: 25px;
                    .admin-call{
                        span{
                            cursor: pointer;
                        }
                    }
                }
            }
            .rooms-jianjie{
                width:100%;
                min-height:200px;
                background:rgb(248, 248, 248);
                border-radius:5px;
                padding:20px;
                font-size:16px;
                line-height: 25px;
                position: relative;
                margin-bottom: 30px;
                color:rgb(72, 72, 72);
                overflow-wrap: break-word;
            }
            
            .rooms-jianjie:before{
                position: absolute;
                top:-19px;
                left:15px;
                content:"";
                display:block;
                width:0;
                height:0;
                border-width:10px;
                border-style: solid;
                border-color:transparent transparent rgb(248, 248, 248) ;
            }

            .rooms-rooms{
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                padding-top:30px;
                padding-bottom:30px;
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 30px;
                .item{
                    border:1px solid #eee;
                    padding:10px;
                    border-radius:5px;
                    margin-right: 10px;
                    width:200px;
                    min-height:220px;
                    margin-bottom: 15px;
                    dt{
                        i{
                            font-size:40px;
                        }
                    }
                    dd{
                        font-size:14px;
                        line-height: 18px;
                        color:rgb(72, 72, 72);
                    }
                }
            }
            .rooms-type{
                font-size:16px;
                line-height: 22px;
                color:rgb(72, 72, 72);
                border-bottom:1px solid #eee;
                padding-bottom:20px;
                .text{
                    margin-bottom:20px;
                }
                span{
                    display:inline-block;
                    font-weight:400;
                    margin-right:40px;
                    width:120px;
                    color:#333;
                }
            }
            .rooms-conf{
                display:flex;
                flex-wrap: wrap;
                padding:30px 0;
                border-bottom: 1px solid #eee;
                dl{
                    width:10%;
                    text-align: center;
                    margin-bottom:20px;
                    dt{
                        img{
                            width:40px;
                        }
                    }
                }
            }
            .rooms-map{
                width:100%;
                padding-top:30px;
                .map-title{
                    color:rgb(72, 72, 72);
                    font-size:24px;
                    line-height: 30px;
                    margin-bottom:20px;
                }
                img{
                    width:100%;
                    height:100%;
                    display: block;
                }
            }
            .rooms-notice{
                padding:30px 0;
                .notice-title{
                    color:rgb(72, 72, 72);
                    font-size:24px;
                    line-height: 30px;
                    margin-bottom:20px;
                }
                .rooms-notice-box{
                    display: flex;
                    .rooms-notice-lable{
                        min-width:150px;
                        color:#333;
                        font-size:16px;
                        line-height: 22px;
                    }
                    .rooms-notice-content{
                        flex:2;
                        color:rgb(72, 72, 72);
                        font-size:16px;
                        line-height: 22px;
                        p{
                            height:35px;
                        }
                    }
                }
            }
        }
        .right-share{
            width:200px;
            button{
                background:transparent;
                border:0;
                cursor: pointer;
                i{
                    font-size:24px;
                    color:#555;
                }
            }
        }
    }
    
    .rooms-order{
        width:100%;
        position: fixed;
        left:0;
        bottom:0;
        padding:15px 0;
        box-shadow: 0 0 10px #ddd;
        background:#fff;
        .rooms-order-box{
            // display: flex;
            // align-items: center;
            .order-left{
                display: flex;
                .start-time,.center-time,.end-time{
                    text-align: center;
                    > span{
                        display: block;
                        height:25px;
                        position: relative;
                        font-size:16px;
                        color:#000;
                        input{
                            text-align: center;
                            width:120px;
                            border:1px solid #ddd;
                            height:30px;
                            line-height: 30px;
                        }
                    }
                    label{
                        font-size:12px;
                        color:#999;
                    }
                }
                .center-time{
                    margin:0 10px;
                    span{
                        width:50px;
                    }
                    span:after{
                        content: "";
                        display: block;
                        width:100%;
                        height:1px;
                        background:#000;
                        position: absolute;
                        top:49%;
                        left:0;
                    }
                    label{
                        color:#000;
                    }
                }
            }
            @media (max-width: 768px){
                .order-left{
                    justify-content: center;
                }
            }
            .order-center{
                flex: 2;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height:100%;
                strong{
                    font-size:16px;
                    margin-right:5px;
                    span{
                        color:#e1bf00;
                        font-size:22px;
                        font-weight: 400;
                    }
                }
            }
            @media (max-width: 768px){
                .order-center{
                    justify-content: center;
                }
            }
            .order-right{
                padding-left:50px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                height:100%;
                button{
                    width:120px;
                    height:40px;
                    color:#fff;
                    background:#e1bf00;
                    border-radius:50px;
                    border:0;
                    font-size:16px;
                    cursor: pointer;
                }
            }
            @media (max-width: 768px){
                .order-right{
                    justify-content: center;
                    padding-left:0;
                }
            }
        }
    }
    .alertbox{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(255, 255, 255, 0.8);
        z-index: 1;
        .alertbox-img{
            width:20%;
            min-width:200px;
            position: absolute;
            top:15%;
            left:40%;
            img{
                width:100%;
                display: block;
            }
            .close{
                width:40px;
                height:40px;
                background:#fff;
                border-radius: 50%;
                border: 0;
                position: absolute;
                top:-35px;
                right:-35px;
                i{
                    font-size:30px;
                }
            }
        }
    }
    .picclose{
        position: absolute;
        top:20px;
        right:5%;
        width:40px;
        height:40px;
        background:#fff;
        border-radius: 50%;
        line-height: 40px;
        display: block;
        text-align: center;
        cursor: pointer;
        i{
            font-size:38px;
        }
    }
}
</style>

